// pages/add/childCpns/tab/tab.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    moneyValue: String
  },

  /**
   * 组件的初始数据
   */
  data: {
    selectedTab: 0,
    selectedColor: "#FFBE00",
    tabTitle: ["支出", "收入"],
    selectedPayIcon: "/assets/images/accountIcon/pay/haizi.png",
    selectedPayName: "孩子",
    selectedPayIndex: 0,
    selectedPayBgcolor: "#53C5AB",
    payIcon: [
      {
        iconPath: "/assets/images/accountIcon/pay/haizi.png",
        name: "孩子",
        bgColor: "#53C5AB"
      },{
        iconPath: "/assets/images/accountIcon/pay/hongbao.png",
        name: "红包",
        bgColor: "#D2C79E"
      }, {
        iconPath: "/assets/images/accountIcon/pay/huazhuangpin.png",
        name: "化妆品",
        bgColor: "#F76D9C"
      }, {
        iconPath: "/assets/images/accountIcon/pay/iconset0263.png",
        name: "游戏",
        bgColor: "#F7756D"
      }, {
        iconPath: "/assets/images/accountIcon/pay/traffic.png",
        name: "旅行",
        bgColor: "#C07FD6"
      },
    ],
    selectedIncomeIcon: "/assets/images/accountIcon/income/hongbao.png",
    selectedIncomeName: "红包",
    selectedIncomeBgcolor: "#F7756D",
    selectedIncomeIndex: 0,
    incomeIcon: [
      {
        iconPath: "/assets/images/accountIcon/income/hongbao.png",
        name: "红包",
        bgColor: "#F7756D"
      },
      {
        iconPath: "/assets/images/accountIcon/income/jiangjinguize.png",
        name: "奖金",
        bgColor: "#48C0E3"
      },
      {
        iconPath: "/assets/images/accountIcon/income/jianzhi.png",
        name: "兼职",
        bgColor: "#53C5AB"
      },
      {
        iconPath: "/assets/images/accountIcon/income/touzi.png",
        name: "投资",
        bgColor: "#FEBB50"
      },
      {
        iconPath: "/assets/images/accountIcon/income/gongzi.png",
        name: "工资",
        bgColor: "#7DA086"
      },
    ]
  },

  /**
   * 组件的方法列表
   */
  methods: {
    //切换tab,通过selectedTab是否等于index，来判断选中状态
    handleClick(e){
      console.log(e.currentTarget.dataset.index)
      const selectedTab = e.currentTarget.dataset.index;
      this.setData({
        selectedTab
      })
      //默认值提交给父组件
      this.handleDefaultValue() 
    },
  
    //选择支出icon
    handleSelectPay(e){
      const selectedPayIcon = e.currentTarget.dataset.iconpath
      const selectedPayName = e.currentTarget.dataset.icontext
      const selectedPayBgcolor = e.currentTarget.dataset.iconcolor
      const selectedPayIndex = e.currentTarget.dataset.index
      const selectedTab = this.data.selectedTab
      this.setData({
        selectedPayIcon,
        selectedPayName,
        selectedPayIndex,
        selectedPayBgcolor,
      })
      this.triggerEvent('payIcon', { selectedPayIcon, selectedPayName, selectedPayBgcolor, selectedTab})
    },
    // 选择收入icon
    handleSelectIncome(e) {
      const selectedIncomeIcon = e.currentTarget.dataset.iconpath
      const selectedIncomeName = e.currentTarget.dataset.icontext
      const selectedIncomeBgcolor = e.currentTarget.dataset.iconcolor
      const selectedIncomeIndex = e.currentTarget.dataset.index
      const selectedTab = this.data.selectedTab
      this.setData({
        selectedIncomeIcon,
        selectedIncomeName,
        selectedIncomeIndex,
        selectedIncomeBgcolor,
      })
      this.triggerEvent('incomeIcon', { selectedIncomeIcon, selectedIncomeName, selectedIncomeBgcolor, selectedTab })
    },
    // 把tab页的默认值提交给父组件
    handleDefaultValue() {
      if (this.data.selectedTab === 0) {
        console.log('show', this.data.selectedPayIcon)
        //支出默认icon
        const selectedPayIcon = this.data.selectedPayIcon
        const selectedPayName = this.data.selectedPayName
        const selectedPayBgcolor = this.data.selectedPayBgcolor
        const selectedPayTab = 0
        this.triggerEvent('defaultPayIcon', { selectedPayIcon, selectedPayName, selectedPayBgcolor, selectedPayTab })
      } else if (this.data.selectedTab === 1) {
        //收入默认icon
        const selectedIncomeIcon = this.data.selectedIncomeIcon
        const selectedIncomeName = this.data.selectedIncomeName
        const selectedIncomeBgcolor = this.data.selectedIncomeBgcolor
        const selectedIncomeTab = 1
        this.triggerEvent('defaultIncomeIcon', { selectedIncomeIcon, selectedIncomeName, selectedIncomeBgcolor, selectedIncomeTab })
      }
    }
  },
  // 组件生命周期
  pageLifetimes: {
    show: function(){
      this.handleDefaultValue()   
    }
  } 
})
